<template>
	<view class="item" :style="style" @click="src && $go('/components/appVideo/videoPlay?src='+src)">
		<image :src="cover" :mode="src?'aspectFill':'aspectFit'" class="cover" v-if="cover"></image>
		<image src="./loading.gif" mode="aspectFit" class="loadingimg" v-else></image>
		<view class="icons" :style="iconStyle" v-if="src">
			<image src="./playIcon.png" mode="aspectFit" class="icon"></image>
		</view>
	</view>
	<appCreateVideoCoverVue ref="appCreateVideoCoverVueE" @success="createCoverSuccess" />
</template>

<script setup>
	import {nextTick, ref, watchEffect } from 'vue';
	import appCreateVideoCoverVue from '../appCreateVideoCover/appCreateVideoCover.vue';
	
	let props =  defineProps({
		src:{
			type:String,
			default:""
		},
		style:{ //组件样式
			type:Object,
			default:{
				height:'200rpx',
				width:'200rpx',
				borderRadius:"10rpx"
			}
		},
		iconStyle:{ //播放图标样式
			type:Object,
			default:{
				height:'80rpx',
				width:'80rpx',
				borderRadius:"50%",
				backgroundColor:'rgba(0,0,0,.5)'
			}
		}
	})
	
	const appCreateVideoCoverVueE = ref()
	
	let cover = ref('')
	
	watchEffect(()=>{
		if(props.src){
			nextTick(()=>{
				appCreateVideoCoverVueE.value.create(props.src)
			})
		}
	})
	
	const createCoverSuccess = (e)=>{
		//生成图片完成
		cover.value = e
	}
	
	
	

	
</script>

<style scoped lang="scss">
	.cover{
		width: 100%;
		height: 100%;
	}
	.item{
		overflow: hidden;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background-color: #d9dad7;
	}
	.icons{
		position: absolute;
		z-index: 2;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		.icon{
			width: 50%;
			height: 50%;
		}
	}
	.loadingimg{
		width: 60%;
	}
</style>